﻿@model SocialGoal.Web.ViewModels.GoalsPageViewModel
@{
    ViewBag.Title = "ListOfGoals";
}
@*<script src="/Scripts/handlebars-1.0.rc.1.js" type="text/javascript"></script>*@


<div class="well span12">
<div class="span4" style="padding-left:30px;"><h4>Goals</h4></div>
<div  class="span8">
    <strong>Sort By</strong>
    @Html.DropDownList("sortby", Model.SortBy, new { @onchange = "ListOfGoals();" })
    <strong>Filter By</strong>
    @Html.DropDownList("filterby", Model.FilterBy, new { @onchange = "ListOfGoals();" })
</div>

<div id ="listofgoals" style="float:left;" class="span11">
     
    @if (Model.GoalList.Count() == 0)
    {
        <div class="alert alert-info">
            No results found
        </div>
    }
    else
    {       
        <div class="span12" id="goalListContainer" style="margin-top:10px;">
       <hr />
          <table class="table">
        @Html.Partial("_Goalslist",Model.GoalList)
       </table>
        </div>
        if (Model.GoalList.Count() == 5)
        {
         <div  id="morelink"> <a href="#" onclick="loadMore();">More Goals</a></div>
        }
    }
</div>
</div>
     <div id="content" style="color:Red;"></div>
      <div class="hiddenData" style="display:none;"></div>
<script type="text/javascript">

    $(document).ready(function () {

        //to load templates to a hidden div
        $.get('/Templates/Templates.htm', function (data) {
            $('.hiddenData').html(data);
        });
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            loadMore();
        }
    });
    var current = 0;
    var currentGoalPage = 0;
    function loadMore() {
        var sortBy = $('#sortby').val();
        var filterBy = $('#filterby').val();


        if (currentGoalPage > -1) {
            currentGoalPage++;

            $.ajax({
                url: "/Goal/GoalList",
                type: "POST",
                data: { sortBy: sortBy, filterBy: filterBy, page: currentGoalPage },
                dataType: "json",
                beforeSend: function () {
                    console.log("a");
                    $("#goalListContainer").find(".alert-info").remove();
                    $("#goalListContainer").append('<div class="alert alert-info" id="loadimage">Loading...</div>');
                },
                success: function (data) {
                    $('#loadimage').remove();
                    if (data.length != 0) {
                        loadTemplate(data);
                        $('#morelink').show();
                        if (data.length < 5) {
                            addNoMoreGoals();
                        }
                    } else {
                        addNoMoreGoals();
                    }
                }
            });

        }

        function addNoMoreGoals() {
            $('#morelink').hide();
            currentGoalPage = -1;
            $("#goalListContainer").find(".alert-info").remove();
            $("#goalListContainer").append('<div class="alert alert-info"> No more goals found </div>');
        }
    }

    function loadTemplate(data) {
        var source = $("#goalList-template").html();

        var template = Handlebars.compile(source);
        $("#goalListContainer").append(template({ objects: data }));
    }

    function ListOfGoals() {  
        var sortby = $("#sortby").val();
        var filterby = $("#filterby").val();
        var url = '/Goal/GoalList';
        $.get(url, { 'sortBy': sortby, 'filterBy': filterby, 'page': 0 }, function (result) {
            $("#goalListContainer").html('');
            if (result == '') {
                $("#goalListContainer").append('<div class="alert alert-info"> No goals found </div>');
                $('#morelink').hide();
            }
            else {
                $('#morelink').show();
            }
            currentGoalPage = 0;  
            loadTemplate(result);

        });

        //document.location.href="/Goal/GoalList?sortBy="+sortby+"&filterBy="+filterby;

    }
</script>





